<template>
	<view class="page">
		<view class="block">

			<view class="row">
				<view class="key">品牌</view>
				<view class="value" @click="brandShow= true">
					<text :class="!carData.brand && 'none'">{{carData.brand|| '请依次选择'}}</text>
				</view>
			</view>
			<view class="row">
				<view class="key">能源类型</view>
				<view class="value" @click="typeClick">
					<text :class="!carData.type  && 'none'">{{carData.type || '请依次选择'}}</text>
				</view>
			</view>

			<view class="row">
				<view class="key">型号</view>
				<view class="value" @click="modelClick">
					<text :class="!carData.model && 'none'">{{carData.model || '请依次选择'}}</text>
				</view>
			</view>
			<view class="row">
				<view class="key">指导价</view>
				<view class="value">
					<input v-model="carData.price" placeholder="请输入" type="number"
						placeholder-class="placeholder-class" />
				</view>
			</view>
			<view class="row">
				<view class="key">手机号</view>
				<view class="value">
					<input v-model="carData.phone" placeholder="请输入" type="number"
						placeholder-class="placeholder-class" />
				</view>
			</view>
		</view>
		<view class="block" style="margin-top: 30rpx; padding: 20rpx;">
			<view>备注</view>
			<textarea v-model="carData.mark" class="textarea" placeholder="请输入备注"></textarea>
		</view>
		<view class="commit" @click="debounceCommit">提交</view>
	</view>

	<!-- 能源类型、品牌、型号 picker选择器 -->

	<up-picker :show="brandShow" :columns="brandList" showToolbar title="品牌" @cancel="brandShow = false"
		@confirm="brandConfirm" />
	<up-picker :show="typeShow" :columns="typeList" showToolbar title="能源类型" @cancel="typeShow = false"
		@confirm="typeConfirm" />
	<up-picker :show="modelShow" :columns="modelList" showToolbar title="型号" @cancel="modelShow = false"
		@confirm="modelConfirm" />

</template>

<script setup>
	import {
		ref,
	} from 'vue';
	import {
		getBrand,
		getType,
		getModel,
		addCarmodelUser
	} from '/api/car.js';

		import {
			debounce
		} from "lodash"
	//数据
	const carData = ref({
		brand: null, //品牌
		type: null, //能源类型
		model: null, //型号
		price: null, //指导价
		phone: null, //手机号
		mark: null //备注
	})

	//选择器控制
	const brandShow = ref(false)
	const typeShow = ref(false)
	const modelShow = ref(false)
	// 选择器内容
	const brandList = ref([[]]);
	const typeList = ref([[]]);
	const modelList = ref([[]]);

	const typeClick = () => {
		if (!carData.value.brand) {
			uni.showToast({
				title: '请选择上一级',
				icon: 'error',
				duration: 2000
			})
			return
		}
		typeShow.value = true
	}

	const modelClick = () => {
		if (!carData.value.type) {
			uni.showToast({
				title: '请选择上一级',
				icon: 'error',
				duration: 2000
			})
			return
		}
		modelShow.value = true
	}

	//品牌确定
	const brandConfirm = async (e) => {
		carData.value.brand = e.value[0].text
		//获取能源数据
		await getTypeList()
		//清除能源类型
		carData.value.type = null
		//清除型号
		carData.value.model = null
		//关闭弹窗
		brandShow.value = false
	}

	// 能源类型确定
	const typeConfirm = async (e) => {
		carData.value.type = e.value[0].text
		//获取型号数据
		await getModelList()
		//清除型号
		carData.value.model = null
		//关闭弹窗
		typeShow.value = false
	}

	// 型号确定
	const modelConfirm = (e) => {
		carData.value.model = e.value[0].text
		//关闭弹窗
		modelShow.value = false
	}


	//提交
	async function commit() {
		let msg = ''
		if (!/^1[3-9]\d{9}$/.test(carData.value.phone)) {
			msg = '请输入正确的手机号！'
		}
		const keys = {
			price: '请输入指导价!',
			model: '请选择型号!',
			type: '请选择能源类型!',
			brand: '请选择品牌!',
		}
		Object.keys(keys).forEach(key => {
			if (!carData.value[key]) {
				msg = keys[key]
			}
		})
		if (msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			})
			return
		}
		let res= await addCarmodelUser(carData.value,true)
	}
	const debounceCommit=debounce(commit,1000)


	//品牌下拉数据
	const getBrandList = async () => {
		let res = await getBrand()
		brandList.value[0] = res.data.data.map((item) => {
			return {
				id: item.brand,
				text: item.brand,
			}
		})
	}
	getBrandList()
	
	
	//能源类型下拉数据--通过品牌
	const getTypeList = async () => {
		let res = await getType({
			brand: carData.value.brand
		})
		typeList.value[0] = res.data.data.map((item) => {
			return {
				id: item.type,
				text: item.type,
			}
		})
	}

	//型号下拉数据--通过品牌+能源类型
	const getModelList = async () => {
		let res = await getModel({
			brand: carData.value.brand,
			type: carData.value.type
		})
		modelList.value[0] = res.data.data.map((item) => {
			return {
				id: item.model,
				text: item.model,
			}
		})
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 30rpx;
		background: #F5F5F5;
		min-height: 100vh;
	}

	.block {
		background: #fff;
		border-radius: 16rpx;
		padding: 0 20rpx;

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;

			&:not(:last-child) {
				border-bottom: 1rpx solid #F5F5F5;
			}

			.key {
				&:before {
					content: '*';
					color: red;
				}
			}

			.value {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				input {
					flex: 1;
					text-align: right;
					padding-right: 20rpx;
				}

				.none {
					color: #CCCCCC;
				}
			}

		}

		.textarea {
			width: 100%;
			background: #F5F5F5;
			margin-top: 20rpx;
			border-radius: 16rpx;
			padding: 20rpx;
			box-sizing: border-box;
			height: 180rpx;
		}
	}

	.commit {
		position: absolute;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #5985D0;
		color: #fff;
		border-radius: 40rpx;
		left: 30rpx;
		right: 30rpx;
		bottom: 50rpx;
	}
</style>
<style>
	/deep/ .placeholder-class {
		text-align: right !important;
		color: #CCCCCC;
	}
</style>